import message5 from '@/assets/message/message5.png';
import RequestTable from '@/components/RequestTable';
import { Button, Space } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useReactToPrint } from 'react-to-print';
import './index.less';

// 打印内容组件（独立出来）
const PrintContent = React.forwardRef(({ data }, ref) => {
  return (
    <div ref={ref} className="print-area">
      <RequestTable
        tableRest={{
          dataSource: data,
          columns: [
            { title: '商品名称', dataIndex: 'name', key: 'name' },
            { title: '数量', dataIndex: 'quantity', key: 'quantity' },
            { title: '单价', dataIndex: 'price', key: 'price' },
          ],
          size: 'middle',
          pagination: false, // 打印专用表格始终关闭分页
          bordered: true,
        }}
      />
    </div>
  );
});

// 主组件
const App = () => {
  const printRef = useRef();
  const [orderData, setOrderData] = useState<any[]>([]);
  const [open, setOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  // 模拟异步加载数据
  const loadData = async () => {
    setTimeout(() => {
      setOrderData(
        new Array(30).fill({})?.map((el: any, index: number) => ({
          name: `商品${index}`,
          quantity: Math.floor(Math.random() * 100),
          price: Math.floor(Math.random() * 1000),
        })),
      );
    }, 500);
  };

  useEffect(() => {
    loadData();
  }, []);

  // 打印配置
  const handlePrint = useReactToPrint({
    contentRef: printRef,
    documentTitle: '订单打印',
    pageStyle: `
      @media print {
        @page { margin: 20mm; }
        table { width: 100% !important; }
        .ant-table-thead > tr > th { background: #f0f0f0 !important; }
      }
    `,
  });

  return (
    <div className="container">
      {/* 显示用表格（保持分页） */}
      <RequestTable
        showRowSelection
        tableRest={{
          dataSource: orderData,
          columns: [
            { title: '商品名称', dataIndex: 'name', key: 'name' },
            { title: '数量', dataIndex: 'quantity', key: 'quantity' },
            { title: '单价', dataIndex: 'price', key: 'price' },
          ],
          size: 'middle',
          pagination: {
            current: currentPage,
            pageSize: pageSize,
            showSizeChanger: true,
            onChange: (page, size) => {
              setCurrentPage(page);
              setPageSize(size);
            },
          },
        }}
      />

      {/* 打印专用内容（隐藏不可见） */}
      <div style={{ position: 'absolute', left: '-9999px' }}>
        <PrintContent ref={printRef} data={orderData} />
      </div>

      {/* 操作按钮 */}
      <Space>
        <Button onClick={() => setOpen(!open)} size="small">
          切换图片{' '}
          {open && <img src={message5} width={100} className="print-img" />}
        </Button>
        <Button type="primary" onClick={handlePrint}>
          打印订单
        </Button>
      </Space>
    </div>
  );
};

export default App;
